<template>
	<cl-drawer
		ref="drawer"
		:props="{
			title: '评论',
			size: '650px',
			appendToBody: true
		}"
		show-confirm
		confirm-text="提交"
		@confirm="submit"
		@close="reset"
		:saving="saving"
	>
		<el-form ref="form" label-position="top" :model="form" :rules="rules">
			<el-form-item prop="content" label="评论内容">
				<cl-wang-editor
					ref="content"
					v-model.trim="form.content"
					placeholder="请输入评论内容"
					:menus="editorMenus"
					:extend="editorExtend"
				/>
			</el-form-item>
		</el-form>
		<employees-dialog :all="false" ref="employeesDialog" />
	</cl-drawer>
</template>
<script>
import EmployeesDialog from "../flow-design/employees-dialog";
import E from "wangeditor";
class ReferUserMenu extends E.BtnMenu {
	constructor(editor) {
		const $elem = E.$(`<div class="w-e-menu" data-title="@人员"><i>@</i></div>`);
		super($elem, editor);
	}

	// 菜单 key ，各个菜单不能重复
	static menuKey = Symbol("referUserMenuKey");
	// 菜单点击事件
	clickHandler() {}
	tryChangeActive() {}
	focus() {
		this.cmdDo("focus");
	}
	cmdDo(...args) {
		this.editor.cmd.do(...args);
	}
	// 追加新内容
	append(html, cursor = false) {
		if (cursor) {
			this.cmdDo("insertHTML", html);
			return;
		}
		this.editor.txt.append(html);
	}
	insertUser(list) {
		if (!list.length) return;
		this.focus();
		let html = list
			.map(
				v => `<a data-id="${v.user_id}" contenteditable="false" style="color: #4DA6FF;text-decoration: none;">
				@${v.user_name}
			</a>`
			)
			.join("");
		this.append(`<p>${html}</p>\n`);
		this.focus();
	}
}
export default {
	name: "oa-comment-form",
	components: {
		EmployeesDialog
	},
	data() {
		return {
			saving: false,
			form: {
				oa_id: "",
				content: ""
			},
			rules: { content: [{ required: true, message: "请填写评论内容" }] },
			callback: null,
			editorMenus: [
				"head",
				"bold",
				"fontSize",
				"fontName",
				"italic",
				"underline",
				"strikeThrough",
				"indent",
				"lineHeight",
				"foreColor",
				"backColor",
				"link",
				"list",
				"todo",
				"justify",
				"quote",
				"image",
				"video",
				"table",
				"splitLine",
				"undo",
				"redo"
			]
		};
	},
	methods: {
		open(data = {}, callback) {
			this.form.oa_id = data.oa_id;
			this.callback = callback;

			this.$refs.drawer.create(() => {});
		},
		async submit() {
			this.$refs.form.validate(async (valid, errors) => {
				this.showFormErr(errors);
				if (!valid) return;
				let form = { ...this.form };
				form.content = form.content
					.replaceAll("<p> </p>", "")
					.replaceAll('<p class="br"><br/> </p>', "")
					.replaceAll("\n", "")
					.replaceAll("\t", "");
				this.saving = true;
				this.$service.oa.comment(form).done(() => {
					this.saving = false;
				});

				this.$message.success("评论成功");
				this.callback && this.callback();
				this.close();
			});
		},
		close() {
			this.$refs.drawer.close();
		},
		reset() {
			this.$refs.form.resetFields();
			this.$resetFields(this.form);
		},
		// 富文本自定义扩展
		editorExtend(editor) {
			let that = this;
			if (editor.config.menus.includes(ReferUserMenu.menuKey)) return;
			ReferUserMenu.prototype.clickHandler = function() {
				that.$refs.employeesDialog.open(list => {
					this.insertUser(list);
				});
			};
			// menu.register({
			// 	clickMenu:
			// });
			// 注册菜单
			// console.log(UsertomMenu.menuKey);
			editor.menus.extend(ReferUserMenu.menuKey, ReferUserMenu);
			editor.config.menus.push(ReferUserMenu.menuKey);
		}
	}
};
</script>
